<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wa">
    <title>上传图片</title>
    <style>
        #chooseImg img{
            width: 100px;
            height: 100px;
        }
        #chooseImg input{
            display: none;
        }
    </style>
</head>
<body>
    <form action="#">
        <div id="chooseImg">
            <img src="../img/add.png" alt="">
            <input type="file">
            <img src="../img/add.png" alt="">
            <input type="file">
            <img src="../img/add.png" alt="">
            <input type="file">
        </div>
        <div id="upload">
            <button type="button">添加</button>
            <button type="submit">上传</button>
        </div>
    </form>
</body>
</html>
<script>
    var btn=document.querySelector('#upload button[type=button]');
    var chooseImg=document.querySelector('#chooseImg');

    // 通过点击添加按钮，添加一张占位的img和input
    btn.onclick=function(){
        var img=document.createElement('img');
        img.src='../img/add.png';
        chooseImg.appendChild(img);
        var input=document.createElement('input');
        input.type='file';
        chooseImg.appendChild(input);
        clickFile();
    }

    clickFile();
    function clickFile(){
        var aImg=document.querySelectorAll('#chooseImg img');
        for(var i=0;i<aImg.length;i++){
            // 点击图片实现选择文件的功能
            aImg[i].onclick=function(){
                // input.click()
                this.nextElementSibling.click();
            }
        }
        var aInput=document.querySelectorAll('#chooseImg input[type=file]');
        for(var i=0;i<aInput.length;i++){
            aInput[i].onchange=function(){
                // input标签有一个files属性，里面包含了所上传的文件的信息，
                // input.files是一个数组，数组里面是我们上传的一个一个的文件
                // input.files里面有一个file属性，这个file就是我们所上传的具体文件
                // 如果上传的是图片，file.type的值是image/png或者image/jpeg
                console.dir(this.files);
                var file=this.files[0];
                // 判断文件是否是图片
                // startsWith() 判断某个字符串是否以某个字符开头，返回true/false
                if(file.type.startsWith('image')){
                    //是图片
                    // URL.createObjectURL(file) 根据传入的参数创建一个指向该文件的URL(文件的地址)
                    this.previousElementSibling.src=URL.createObjectURL(file);
                }else{
                    //是其他的文件
                    alert('只能上传图片');
                }
            }
        }
    }

    

</script>